<template>
    <div>
        <!-- 原生播放器 -->
        <audio :src="songUrl" ref="originAudio"></audio>
        <!-- 音频播放自定义 -->
        <!-- 播放暂停 -->
        <div class="myaudiobox">
            <!-- 播放暂停按钮 -->
            <button
                @click="playOrPause" 
                class="myPlayBtn"
                :disabled="hasUrl">
                <!-- 按钮播放时双竖线，暂停时三角 -->
                <span :class="this.audioisplay?'audiodbline':'audiotriange'"></span>
            </button>
            <!-- 歌曲当前时间与总时长 -->
            <p class="songTime">
                {{currentTimemin+':'+currentTimesec}}/{{songDurationmin+':'+songDurationsec}}
            </p>
            <!-- 进度条 -->
            <div class="progress"  ref="progress">
                 <!-- 进度条 -->
                 <div class="progressfake" @click="progressfake"></div>
                <div class="progressslip" 
                    :style="{width:progressWidth+'px'}" 
                    @click="progressfake"></div>
                <div class="progressball" 
                    @mousedown="progressMouse"
                    ref="ball"></div>
            </div>
            <!-- 音量调节 -->
            <div class="volumebtn">
                <span class="voltext">V</span>
                <div class="volume" ref="strip">
                    <div class="volumeball" @mousedown="volumeMouse"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./PlayAudio.js"></script>
<style scoped>
/* 自定义audio盒子 */
.myaudiobox {
    display: flex;
    padding: 10px 0;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #ccc;
    justify-content: space-around;
}

/* 播放键 */
.myaudiobox .myPlayBtn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    outline: none;
}

/* 播放按钮外观 */
.myaudiobox .audiotriange {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../../assets/play.png) no-repeat center center/100% 100%;
}

/* 暂停按钮外观 */
.myaudiobox .audiodbline {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 2px solid #f00;
    position: relative;
    border-radius: 50%;
}

.myaudiobox .audiodbline:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 5px solid #f00;
    position: absolute;
    top: 8px;
    right: 13px;
    margin: auto;
    border-top: none;
    border-bottom: none;
}

/* 歌曲时间显示 */
.myaudiobox .songTime {
    padding: 0 12px;
    user-select: none;
}

/* 进度条 */
.myaudiobox .progress {
    width: 1000px;
    height: 40px;
    overflow: hidden;
    position: relative;
    margin-right: 5px;
    display: flex;
}

.myaudiobox .progressfake {
    position: absolute;
    top: 17.5px;
    left: 0;
    background-color: #ccc;
    width: 100%;
    height: 5px;
}
.myaudiobox .progressslip{
    height: 5px;
    background-color: #000;
    z-index: 1;
    margin-top: 17.5px;
}

.myaudiobox .progress .progressball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #000;
    z-index: 1;
    margin-top: 12.5px;
}

.myaudiobox .progress:hover .progressball {
    background-color: #000;
    opacity: .8;
    transition: .3s;
}

/* 音量控制器 */
.myaudiobox .volumebtn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    text-align: center;
    line-height: 30px;
    user-select: none;
    transition: 1s;
}

.myaudiobox .volumebtn:hover {
    width: 100px;
    border-radius: 5px;
    transition: 1s;
}
.myaudiobox .volumebtn:hover .voltext{
    display: none;
}

.myaudiobox .volume {
    width: 80px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 5px;
    overflow: hidden;
    display: none;
}
.myaudiobox .volumebtn:hover .volume{
    display: block;
}
.myaudiobox .volume:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    top: 7.5px;
    left: 0;
    background-color: #ccc;
}

.myaudiobox .volume .volumeball {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(9, 99, 99, .9);
    position: absolute;
    top: 5px;
    left: 16px;
    z-index: 1;
}

.myaudiobox .volume .volumeball:before {
    content: '';
    position: absolute;
    width: 80px;
    height: 5px;
    left: -80px;
    top: 2.5px;
    background-color: #000;
}
</style>